<template>
  <div id="login">
    <div class="bg"></div>
    <el-row class="main-container">
      <el-col :lg="8" :xs="16" :md="10" :span="10">
        <div class="top">
          <span>在线考试系统</span>
        </div>
        <div class="container">
          <div class="form bottom">
            <el-form :label-position="'left'"
                     label-width="80px"
                     class="form-horizontal col-sm-offset-3 col-md-offset-3"
                     :model="LoginUser"
                     ref="loginformRef">
              <p class="form-title">账号登录</p>
              <div class="col-sm-11 col-md-11">
                <el-form-item
                    label="用户名"
                    class="form-group"
                    prop="username"
                    :rules="[{required: true, message: '用户名不能为空', trigger: 'change'}]">
                  <el-input v-model.number="LoginUser.username"
                            placeholder="请输入用户名"
                            class="form-control"
                            clearable>
                  </el-input>
                </el-form-item>
                <el-form-item
                    label="密码"
                    class="form-group"
                    prop="password"
                    :rules="[{required: true, message: '密码不能为空', trigger: 'change'}]">
                  <el-input v-model="LoginUser.password"
                            placeholder="请输入密码"
                            type='password'
                            class="form-control"
                            clearable>
                  </el-input>
                </el-form-item>
                <el-form-item prop="role" :rules="[{required: true, message: '请选择身份', trigger: 'change'}]">
                  <el-radio-group v-model="LoginUser.role">
                    <el-radio label="2">学生</el-radio>
                    <el-radio label="1">教师</el-radio>
                    <el-radio label="0">管理员</el-radio>
                  </el-radio-group>
                </el-form-item>
                <div class="form-group">
                  <el-button type="primary" class="btn btn-success pull-left" @click="loginSubmit()">登录</el-button>
                </div>
              <!-- <div class="options">
                <p class="find"><a href="javascript:;">找回密码</a></p>
                <div class="register">
                  <span>没有账号?</span>
                  <span><a href="javascript:;">去注册</a></span>
                </div>
              </div> -->
              </div>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="footer">
      <el-col>
        <p class="text-center">版权所有 ©2023 广东技术师范大学物联网工程3班巫东武 保留所有权利</p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router/dist/vue-router";
import {ElMessage} from 'element-plus'
import AES from '@/utils/AESUtil'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "login",
  setup(){
    const router = useRouter()
    const {proxy} = getCurrentInstance()
    const loginformRef = ref(null)
    let LoginUser = reactive({
      username: "",
      password: "",
      role:""
    })
    onMounted(()=>{
      // eslint-disable-next-line no-undef
      let role = AES.Decrypt($cookies.get("role"));
      if (role === '2'){
        router.push({path: '/student'})
      }else if (role === '1' || role === '0'){
        router.push({path: '/manage'})
      }
    })
    function login(){
      let roleAES = AES.Encrypt(LoginUser.role)
      if(LoginUser.role === '2') {
        // eslint-disable-next-line no-undef
        proxy.$axios.post(
            '/login/student',
            {...LoginUser}
        ).then(
            response => {
              if (response.data === ''){
                ElMessage({
                  type: 'error',
                  message: '用户名或密码错误，请重新输入',
                  center: true
                })
              }else {
                // eslint-disable-next-line no-undef
                $cookies.set('id', response.data.studentId, "24h")
                // eslint-disable-next-line no-undef
                $cookies.set('name', response.data.studentName, "24h")
                // eslint-disable-next-line no-undef
                $cookies.set('role', roleAES, "24h")
                router.push({path: '/student'})
              }
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
      }else if(LoginUser.role === '1'){
        // eslint-disable-next-line no-undef
        proxy.$axios.post(
            '/login/teacher',
            {...LoginUser}
        ).then(
            response => {
              if (response.data === ''){
                ElMessage({
                  type: 'error',
                  message: '用户名或密码错误，请重新输入',
                  center: true
                })
              }else {
                // eslint-disable-next-line no-undef
                $cookies.set('id', response.data.teacherId, "24h")
                // eslint-disable-next-line no-undef
                $cookies.set('name', response.data.teacherName, "24h")
                // eslint-disable-next-line no-undef
                $cookies.set('role', roleAES, "24h")
                router.push({path: '/manage'})
              }
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
      }else if (LoginUser.role === '0'){
        // eslint-disable-next-line no-undef
        proxy.$axios.post(
            '/login/admin',
            {...LoginUser}
        ).then(
            response => {
              if (response.data === ''){
                ElMessage({
                  type: 'error',
                  message: '用户名或密码错误，请重新输入',
                  center: true
                })
              }else {
                // eslint-disable-next-line no-undef
                $cookies.set('id', response.data.account, "24h")
                // eslint-disable-next-line no-undef
                $cookies.set('name', response.data.adminName, "24h")
                // eslint-disable-next-line no-undef
                $cookies.set('role', roleAES , "24h")
                router.push({path: '/manage'})
              }
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
      }
    }
    function loginSubmit(){
      proxy.$refs.loginformRef.validate((valid) => {
        if (valid) {
          login()
        }else {
          return false
        }
      })

    }
    return {
      LoginUser,
      loginformRef,
      loginSubmit,
    }
  }
}
</script>

<style scoped>
.footer {
  color: #e3e3e4;
  margin-top: 600px;
  text-align: center;
  font-size: 18px;
  margin-bottom: 15px;
}
#login .bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow-y: auto;
  height: 100%;
  background: url('../../assets/img/login.jpg')center top / cover no-repeat;
  background-color: #b6bccdd1 !important;
  font-size: 18px;
}
.top {
  font-size: 40px;
  text-align: center;
  margin-top: 20px;
  color: #2CD9D9FF;
  display: flex;
  justify-content: center;
}
.form-title{
  padding-top:20px;
  font-size: 20px;
}
.form{
  width: 500px;
  height: 300px;
  position: absolute;
  left: 50%;top: 50%;
  margin-left: -200px;
  margin-top: 200px;
}
.bottom {
  display:flex;
  justify-content: left;
  background-color: #e3e3e4;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>